<template>
  <div class="bj-item">
    <LabelRow v-on:onMore="onMore" v-bind:label="label">
      <div><el-date-picker v-model="year" type="year" v-on:change="pickerChange(year)" placeholder="选择年"></el-date-picker></div>
    </LabelRow>
    <div id="bjCharts" class="take-content"/>
  </div>
</template>
<script>
import echarts from "echarts";
import LabelRow from "../common/labelRow.vue";
import { sortingEventinfoQueryBrandEventTrend } from "../../config/api.js";
import Pubsub from "../../utils/pubsub";
import {getCookie} from "../../utils/index";

export default {
  components: {
    LabelRow
  },
  data() {
    return {
      label: {
        url: require("../../assets/pigeonholes/bj_chart_icon.png"),
        label: "事件走势"
      },
      chartData: {},
      year: '',
      dealUnitCode:getCookie("department")&&JSON.parse(getCookie("department")).id,//所属委办局编码
    //   beginTime: '',
    //   endTime: '',
    };
  },
  mounted() {
    this.getList();
    this.pubsub_token1 = Pubsub.subscribe("MAKE_REMIND", () => {
      this.getList();
    });
  },
  methods: {
    onMore() {
      console.log("onMore");
    },
    clickList() {
      console.log("clickList");
    },

    getList() { 
      sortingEventinfoQueryBrandEventTrend({ year:this.year,dealUnitCode:this.dealUnitCode}).then((res = {}) => {
this.chartData = res.data||{};
        this.initChart();
      });
	},
	pickerChange(year){
		if(year){
      this.year=year.Format("yyyy")
		}else{
		this.year=null;
    }
    this.getList();
	},
    initChart() {
      this.myChart = echarts.init(document.getElementById("bjCharts"),'light');
      const {xAxis=[],receive=[],complete=[]}=this.chartData||{};
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ["line", "bar"] },
        //     // restore: { show: true },
        //     // saveAsImage: { show: true }
        //   }
        // },
        legend: {
          data: ["已接收", "已完成"]
        },
        xAxis: [
          {
            type: "category",
            // boundaryGap: false,
            data: xAxis,
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "数量",
            min: 0,
            // max: 250,
            // interval: 50,
            axisLabel: {
              // formatter: "{value}"
            }
          }
        ],
        series: [
        {
            name:'已接收',
            type:'line',
            data:receive
        },
        {
            name:'已完成',
            type:'line',
            data:complete
        }
        ]
      };
      this.myChart.setOption(option);
    }
  },
  destroyed() {
    this.pubsub_token1 && Pubsub.unsubscribe(this.pubsub_token1);
  }
};
</script>

<style lang="scss" scoped>
@import "../../css/unifyAcceptWorkbench.scss";
.take-content {
  margin-top: 20px;
  height: 345px;
  /* width: 259px; */
  overflow-x: auto;
}
.bj-item {
  flex: 1;
  background: #fff;
}
.cell-ul {
  li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    cursor: pointer;
    .left {
      display: flex;
      h4 {
        margin-bottom: 6px;
      }
    }
    .parent-img {
      margin-right: 20px;
      img {
        width: 20px;
      }
    }
    .right {
      color: #999;
    }
  }
}
</style>
